<template>
	<view>
 		<view class="margin bg-fff padding-xl radius shadow-warp bg-white margin-top">
 			{{loginForm}}
			<!-- 图标 -->
 			<view  style="width: 100%;">
 			</view>
 			<!-- 账号密码 -->
 			<view class="login_form"  >
 				<view class="login_form_input">
 					<view name="username">
 						<uni-easyinput v-model="loginForm.userName" 
							prefixIcon="person" placeholder="请输入登录用户名">
 						</uni-easyinput>
 					</view>
 					<view name="password">
 						<uni-easyinput type="password" v-model="loginForm.password" 
							prefixIcon="locked" placeholder="请输入登录密码">
						</uni-easyinput>
 					</view>
					<view name="code" class="uni-form-item uni-column">
						<uni-easyinput v-model="loginForm.code" 
							placeholder="请输入验证码"></uni-easyinput>
						<image style="width: 100px; height: 50px; background-color: #eeeeee;" 
						@click="getCode()"
							:src="codeUrl"></image>
					</view>
 				</view>
 			</view>
 		</view>
 		<!-- 按钮 -->
 		<button class="btn" type="primary" @click="onLogin()" style="width: 80%;margin-left: 10%;margin-top: 8vw;">登录</button>
 	</view>
</template>

<script>
import authApi from '../api/login/auth.js'
export default {
  name: 'Login',
  data() {
    return {
      codeUrl: '',
      loginForm: {
        userName: 'zhangsan',
        password: '123456',
        code: '',
        uuid: ''
      }
    }
  },
  methods: {
    // 获取验证码
    getCode() {
      authApi.genCaptcha().then(res => {
        console.log(res.data.imageBase64)
        this.codeUrl = res.data.imageBase64;
        this.loginForm.uuid = res.data.uuid;
      })
    },
    // 处理登录操作
    onLogin() {
      authApi.login(this.loginForm).then(res => {
        if (res.ok) {
          let token = res.data.token;
          let userId = res.data.userId;
          // 将 token 和 userId 存储到会话存储中
          uni.setStorageSync("token", token)
          //uni.setStorageSync("userId", userId)
          // 显示登录成功的提示信息
          uni.showToast({
            title: res.message
          })
          // 跳转到指定页面
		  uni.switchTab({
		  	url:"/gmall/views/product/skulist"
		  });
        }
      })
    },
  },
  // 在组件挂载后获取验证码
  onLoad() {
   this.getCode();
  }
}
</script>

<style scoped>

</style>